<!DOCTYPE html>
<html>
<head>
<title>Full featured example</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="../js/tinymce_loader.js"></script>
<script>
	tinymce.init({
		mode: "textareas",
		plugins: "pagebreak,table,save,emoticons,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,template,tabfocus",
		add_unload_trigger: 0
	});
</script>
<!-- /TinyMCE -->

</head>
<body>

<form method="post" action="http://www.tinymce.com/dump.php?example=true">
	<div>
		<h3>Full featured example</h3>

		<p>
			This page shows all available buttons and plugins that are included in the TinyMCE core package.
			There are more examples on how to use TinyMCE in the <a href="http://wiki.moxiecode.com/examples/tinymce/">Wiki</a>.
		</p>

		<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
		<div>
			<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%">
				<p>text1 <span style="color:red">middle</span> text2</p>
				<p><b><em>xyz<span style="color:red">---</span>123</em></b></p>
				<p><b><em>xyz<span style="color:green">---</span>123</em></b></p>
				<table>
					<tr>
						<td><span style="color:green"><b>bold 1</b><em>italic 1</em></span></td>
						<td><b>bold 2</b><em>italic 2</em></td>
					</tr>
					<tr>
						<td><b>bold 3</b><em><a href="#">italic 3</a></em></td>
						<td><b>bold 4</b><em>italic 4</em></td>
					</tr>
				</table>
				<p><b><em>xyz<span style="color:red">---</span>123</em></b></p>
				<ul>
					<li><b><em>test 1</em></b><b><em>test 2</em></b></li>
					<li><b><em>test 1</em></b><b><em>test 2</em></b></li>
				</ul>
				<p><b><em>xyz<span style="color:green">---</span>123</em></b></p>
				<p>text 1</p>
				<p>text 2</p>
				<p>text 3</p>
				<p>text 4</p>
			</textarea>
		</div>

		<!-- Some integration calls -->
		<a href="javascript:;" onmousedown="tinymce.get('elm1').show();">[Show]</a>
		<a href="javascript:;" onmousedown="tinymce.get('elm1').hide();">[Hide]</a>
		<a href="javascript:;" onmousedown="tinymce.get('elm1').execCommand('Bold');">[Bold]</a>
		<a href="javascript:;" onmousedown="alert(tinymce.get('elm1').getContent());">[Get contents]</a>
		<a href="javascript:;" onmousedown="alert(tinymce.get('elm1').getContent({format:'raw'}));">[Get raw]</a>
		<a href="javascript:;" onmousedown="alert(tinymce.get('elm1').selection.getContent());">[Get selected HTML]</a>
		<a href="javascript:;" onmousedown="alert(tinymce.get('elm1').selection.getContent({format : 'text'}));">[Get selected text]</a>
		<a href="javascript:;" onmousedown="alert(tinymce.get('elm1').selection.getNode().nodeName);">[Get selected element]</a>
		<a href="javascript:;" onmousedown="tinymce.execCommand('mceInsertContent',false,'<b>Hello world!!</b>');">[Insert HTML]</a>
		<a href="javascript:;" onmousedown="tinymce.execCommand('mceReplaceContent',false,'<b>{$selection}</b>');">[Replace selection]</a>

		<br />
		<input type="submit" name="save" value="Submit" />
		<input type="reset" name="reset" value="Reset" />
	</div>
</form>

</body>
</html>
